<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="运动员信息" />
      <!-- 运动员列表 -->
      <scroll-view scroll-y class="playerList">
        <view v-if="list.length === 0" class="empty-state">
          <text class="empty-text">暂无运动员信息</text>
        </view>
        <view v-else class="item" v-for="(item,index) in list" :key="index" @click="viewAthleteDetail(item)">
          <image class="avatar" :src="item.avatar ? item.avatar : imgUrl + 'avatar1@2x.png'" />
          <view class="info">
            <text class="name">{{item.username}}</text>
            <text class="meta">手机号：{{item.mobile || 'N/A'}}</text>
          </view>
          <text class="iconfont xlmicon-arrow-right"></text>
        </view>
      </scroll-view>
    </view>
    <!-- <button class="mt-24 flex-col justify-start items-center text-wrapper w-full" @click="addAthlete">
      <text class="text">新增运动员</text>
    </button> -->
  </scroll-view>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config';
  import { onShow } from '@dcloudio/uni-app';
  import { useRequest } from '@/api';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_MEMBER_LISTATHLETE_POST } = useRequest()
  const list = ref([])
  
  onShow(() => {
    getList();
  })
  
  const getList = async () => {
    let params = {
      page: 1,
      page_size: 100,
      lng: uni.getStorageSync('longitude'),
      lat: uni.getStorageSync('latitude')
    }
    list.value = [];
    try {
      const res = await API_MEMBER_LISTATHLETE_POST(params)
      console.log('getList', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          list.value = res.data.data;
        } else {
          list.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  
  // 查看运动员详情
  const viewAthleteDetail = (item) => {
    uni.navigateTo({
      url: `/pages/mine/addPlayer/index?athlete_id=${item.id}&readonly=true`
    })
  }
  
  // 新增运动员
  const addAthlete = () => {
    uni.navigateTo({
      url: '/pages/mine/addPlayer/index'
    })
  }
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
